<template>
  <div class="app-container">

    <el-row>
      <div class="filter-container">
        <el-input :placeholder="$t('table.phone')" v-model="mobile" style="width: 200px;" class="filter-item"/>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList(mobile)">{{ $t('table.search') }}</el-button>
      </div>
    </el-row>
    <div v-show="isShow" style="background-color: rgba(149, 238, 189, 0.8);height: 80px;line-height: 80px; border-radius: 5px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      <el-row style="margin-left: 10px">
        <el-col :span="6">{{ list.nickname }}</el-col>
        <el-col :span="6">{{ list.sex | sexFilter }}</el-col>
        <el-col :span="6">{{ list.mobile }}</el-col>
        <el-col :span="6"><el-button type="info" size="small" @click="searchUserAddress(list.id)">{{ isShow2 ? '折叠' : '展开' }}</el-button></el-col>
      </el-row>
    </div>
    <el-collapse-transition>
      <div v-show="isShow2">
        <el-descriptions v-for="(item, index) in addressList" :extra="'地址' + (index + 1)" :key="item.id" :column="columnCount" class="margin-top" style="margin-top: 10px" border>
          <el-descriptions-item :span="1">
            <template slot="label">
              <i class="el-icon-user"/>
              {{ $t('table.contactName') }}
            </template>
            {{ item.contactName }}
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template slot="label">
              <i class="el-icon-mobile-phone"/>
              {{ $t('table.phone') }}
            </template>
            {{ item.contactMobile }}
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template slot="label">
              <i class="el-icon-location-outline"/>
              {{ $t('table.live') }}
            </template>
            {{ item.area | liveFilter }}
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template slot="label">
              <i class="el-icon-tickets"/>
              {{ $t('table.note') }}
            </template>
            <el-tag size="small">{{ item.note }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template slot="label">
              <i class="el-icon-office-building"/>
              {{ $t('table.contactAddress') }}
            </template>
            {{ item.area + item.address | addressFilter }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { getUserListByQuery, getAddressByUserId } from '@/api/user'
import waves from '@/directive/waves' // 按钮波浪样式
import { toMessage } from '@/utils/hint' // 提示信息

export default {
  name: 'AddressList',
  directives: { waves },
  filters: {
    // 性别的转换
    sexFilter(type) {
      if (type === 0) {
        return '女'
      } else {
        return '男'
      }
    },
    // 居住地获取
    liveFilter(live) {
      const lists = live.split('/')
      return lists[1]
    },
    // 详细地址拼接
    addressFilter(address) {
      let result = ''
      address.split('/').filter(item => {
        result = result + item
      })
      return result
    }
  },
  data() {
    return {
      list: {
        id: '',
        nickname: '',
        sex: '',
        mobile: ''
      },
      addressList: {}, // 地址列表
      listLoading: true,
      mobile: '', // 手机号
      createUserId: '', // 用户id
      isShow: false, // 显示用户信息
      isShow2: false, // 显示地址信息
      columnCount: 3
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.createUserId = this.$route.params.id
      this.getList(this.createUserId)
    }
  },
  methods: {
    getList(query) {
      this.listLoading = true
      getUserListByQuery(query).then(response => {
        this.list = response.data.extend.list
        if (this.list.length > 0) {
          this.list = this.list[0]
          this.isShow = true
        } else {
          toMessage(this, 'warning', '查无此用户')
        }
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
      })
    },
    searchUserAddress(userId) {
      getAddressByUserId(userId).then(response => {
        this.addressList = response.data.extend.list
        this.isShow2 = !this.isShow2
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
      })
    },
    // 根据返回的日期计算间隔
    toAge(timeStamp) {
      const birthDate = this.toDate(timeStamp).substr(0, 4)
      const newDate = new Date().getFullYear()
      return (newDate - parseInt(birthDate))
    }
  }
}
</script>
